/* component */
import SaleManager from '@src/modules/system/frame/component/SaleManager.vue'
import ApplicationUpgradePromptDialog from '@src/component/business/BizVersionLimitDialog/components/ApplicationUpgradePromptDialog.tsx'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* scss */
import '@src/component/business/BizWorkWxChatToolBarDialog/BizWorkWxChatToolBarDialog.scss'
/* types */
import RootWindowInitData from '@model/interface/initData/RootWindowInitData'
/* vue */
import VC from '@model/VC'
import { Component } from 'vue-property-decorator'
import { CreateElement } from 'vue'
/* util */
import { getRootWindowInitData } from '@src/util/window'
import { setClipboardData } from '@src/util/dom'
import Platform from '@src/platform'
import i18n from '@src/locales'

const location = window.location
const CustomerUrl = `${location.protocol}//${location.hostname}/multi/?isCustomer=true`
const RepositoryUrl = `${location.protocol}//${location.hostname}/multi/?isWiki=true`

@Component({
  name: ComponentNameEnum.BizWorkWxChatToolBarDialog,
  components: {
    [SaleManager.name]: SaleManager,
    ApplicationUpgradePromptDialog
  }
})
class BizWorkWxChatToolBarDialog extends VC {
  
  /* 等待状态 */
  private pending: boolean = false
  /* 是否显示企业微信聊天工具栏弹窗 */
  private showBizWorkWxChatToolBarDialog: boolean = false
  
  get rootWindowInitData(): RootWindowInitData {
    return getRootWindowInitData()
  }
  
  private close(): void {
    this.showBizWorkWxChatToolBarDialog = false
  }
  
  /**
   * @description 取消
   */
  private cancel() {
    this.close()
  }
  
  private confirm() {
    this.close()
  }
  
  private goQYWXSettingInDoc() {
    Platform.openLink('https://work.weixin.qq.com/wework_admin/')
  }
  
  private goQYWXSettingToolbarDoc() {
    Platform.openLink('https://doc.shb.ltd/shb_xoqazk/ia4qctp2ly559d1m/gre7yumc5sz4ewod/il299ylnby67p5bv.html#_4%E3%80%81%E9%85%8D%E7%BD%AE%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E8%81%8A%E5%A4%A9%E5%B7%A5%E5%85%B7%E6%A0%8F')
  }
  
  /**
   * @description 获取属性
  */
  private getAttributes() {
    return {
      props: {
        width: '480px',
        title: i18n.t('component.workWxChatToolBarDialog.weComChatToolbar'),
        transitionEnabled: false,
        show: this.showBizWorkWxChatToolBarDialog
      },
      on: {
        'update:show': (val: boolean) => {
          this.showBizWorkWxChatToolBarDialog = val
        }
      },
      directives: [
        {
          name: 'loading',
          value: this.pending
        }
      ]
    }
  }
  
  /** 
   * @description 打开弹窗
   * -- 支持外部调用的
  */
  public outsideShow() {
    this.showBizWorkWxChatToolBarDialog = true
  }
  
  private setClipboardDataWithCustomerUrl() {
    this.setClipboardDataHandler(CustomerUrl)
  }
  
  private setClipboardDataWithRepositoryUrl() {
    this.setClipboardDataHandler(RepositoryUrl)
  }
  
  private setClipboardDataHandler(data: string) {
    setClipboardData(
      data, 
      () => {
        Platform.notification({
          message: i18n.t('common.base.tip.copySuccess'),
          type: 'success'
        })
      },
      () => {
        Platform.notification({
          message: i18n.t('common.base.tip.copyFail'),
          type: 'warning'
        })
      }
    )
  }
  
  render(h: CreateElement) {
    const attrs = this.getAttributes()
    
    return (
      <div class={ComponentNameEnum.BizWorkWxChatToolBarDialog}>
        <base-modal {...attrs}>
          <div class='work-wx-chart-toolbar-dialog'>
            <div class='wwctd-content'>
              <div class='wwctd-content-item'>
                <span class='wwctd-content-item-label'>{this.$t('common.base.customerInfo')}：</span>
                <div class='wwctd-content-item-link'>
                  <span class='wwctd-content-item-link-text'>{CustomerUrl}</span>
                  <span 
                    class='wwctd-content-item-link-copy link-text'
                    onClick={() => this.setClipboardDataWithCustomerUrl()}
                  >
                    {this.$t('common.base.copy')}
                  </span>
                </div>
              </div>
              <div class='wwctd-content-item'>
                <span class='wwctd-content-item-label'>{this.$t('wiki.moduleName')}：</span>
                <div class='wwctd-content-item-link'>
                  <span class='wwctd-content-item-link-text'>{RepositoryUrl}</span>
                  <span 
                    class='wwctd-content-item-link-copy link-text'
                    onClick={() => this.setClipboardDataWithRepositoryUrl()}
                  >
                    {this.$t('common.base.copy')}
                  </span>
                </div>
              </div>
            </div>
            <div class='wwctd-tip'>
              <div 
                class='wwctd-tip-text link-text wwctd-tip-text-in'
                onClick={() => this.goQYWXSettingInDoc()}
              >
                {this.$t('component.workWxChatToolBarDialog.weComConfigurePortal')}
              </div>
              <div 
                class='wwctd-tip-text link-text wwctd-tip-text-toolbar'
                onClick={() => this.goQYWXSettingToolbarDoc()}
              >
                {this.$t('component.workWxChatToolBarDialog.howToConfigureChatToolbar')}
              </div>
            </div>
          </div>
          <div slot='footer' class='dialog-footer'>
            <el-button type='ghost' onClick={() => this.cancel()}>{this.$t('common.base.cancel')}</el-button>
            <el-button type='primary' onClick={() => this.confirm()}>{this.$t('common.base.makeSure')}</el-button>
          </div>
        </base-modal>
      </div>
    )
  }
}

export default BizWorkWxChatToolBarDialog